<template>
  <div class="home">
    <h1>TodoList</h1>
    <input type="text" v-model="msg" @change="toDo" />
    <p>{{ msg }}</p>
    <div class="runing">
      <h3>进行中</h3>
      <div v-for="(item, index) of list" :key="item.id">
        <div v-if="item.checked == false">
          <input
            type="checkbox"
            @click="toChange(index)"
            :checked="item.checked"
          />
          {{ item.msg }}
          <span class="delelte" @click="toDelete(index)">删除</span>
        </div>
      </div>
    </div>
    <div class="done">
      <h3>已完成</h3>
      <div v-for="(item, index) of list" :key="item.id">
        <div v-if="item.checked == true">
          <input
            type="checkbox"
            @click="toChange(index)"
            :checked="item.checked"
          />
          {{ item.msg }}
          <span class="delelte" @click="toDelete(index)">删除</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { toRefs, reactive } from "vue";
export default {
  name: "Home",
  setup() {
    const state = reactive({
      msg: "",
      list: JSON.parse(localStorage.getItem("todo2")) || [],
      toDo() {
        var obj = {
          msg: this.msg,
          checked: false,
          id: Math.random(),
        };
        var list = this.list;
        var s = list.findIndex((item) => item.msg === obj.msg);
        if (s === -1) {
          list.unshift(obj);
        }
        this.msg = "";
        this.local();
      },
      toChange(index) {
        var list = this.list;
        list[index].checked = !list[index].checked;
        this.local();
      },
      toDelete(val) {
        this.list.splice(val, 1);
        this.local();
      },
      local() {
        localStorage.setItem("todo2", JSON.stringify(this.list));
      },
    });
    const refState = toRefs(state);
    return {
      ...refState,
    };
  },
};
</script>
